<template>
    <div class="boxss">
        <div class="titles">商城数据(今日实时)</div>
        
        <div class="grid" v-if="checkPermi(['home:shop:num'])">
            <div class="grid-item">
                <div class="add">新增用户</div>
                <div class="nums">{{ dataNum.registerUser.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.registerUser.yesterday }}</span>
                </div>
            </div>

             <div class="grid-item">
                <div class="add">活跃用户</div>
                <div class="nums">{{ dataNum.activeUser.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.activeUser.yesterday }}</span>
                </div>
            </div>

             <div class="grid-item">
                <div class="add">咨询人数</div>
                <div class="nums">{{ dataNum.consultations.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.consultations.yesterday }}</span>
                </div>
            </div>

              <div class="grid-item">
                <div class="add">浏览量</div>
                <div class="nums">{{ dataNum.viewsNumber.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.viewsNumber.yesterday }}</span>
                </div>
            </div>

              <div class="grid-item">
                <div class="add">销售订单</div>
                <div class="nums">{{ dataNum.salesOrders.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.salesOrders.yesterday }}</span>
                </div>
            </div>

              <div class="grid-item">
                <div class="add">销售金额</div>
                <div class="nums">{{ dataNum.salesAmount.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.salesAmount.yesterday }}</span>
                </div>
            </div>

             <div class="grid-item">
                <div class="add">回收订单</div>
                <div class="nums">{{ dataNum.backOrders.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.backOrders.yesterday }}</span>
                </div>
            </div>

             <div class="grid-item">
                <div class="add">回收金额</div>
                <div class="nums">{{ dataNum.backAmount.today }}</div>
                <div class="add">昨日全天: <span class="">{{ dataNum.backAmount.yesterday }}</span>
                </div>
            </div>
        </div>
         <el-empty v-else :image-size="100" description="您还没有该模块权限,请联系管理员分配权限!"></el-empty>
    </div>
</template>
<script>
import homeApi from "@/api/home/newIndex";
 export default {
    data () {
        return {
            dataNum:{
                registerUser:{},
                salesOrders:{},
                salesAmount:{},
                backOrders:{},
                backAmount:{},
               activeUser:{},
               consultations:{},
               viewsNumber:{}
            }
        }
    },
    created() {
        this.getTongjiData()
    },
    methods: {
        async getTongjiData() {
            let res = await homeApi.platformData()
            this.dataNum = res.data

        }
    },

 }
</script>

<style lang="scss" scoped>
@import url('./style.css');
.boxss {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .titles {
    height: 50px;
    // font-weight: bold;
  }
}
.grid {
    display: grid;
    overflow-y: auto;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); //自动适应
    grid-template-rows: repeat(auto-fit, min(80px));
    grid-gap: 10px;
    .grid-item {
        transition: all 0.2s ease;
        padding: 10px;
        background: #F5F6FB;
        border-radius: 10px;
        &:hover {
               background: #f0f0ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(108, 93, 211, 0.1);
        }
    }
    .add {
        font-size: 14px;
        color: #8F92A1;
    }
    .nums {
        margin-top: 4px;

        font-weight: 500;
        color: #000;
        font-size: 18px;
    }
}
</style>
